﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>支付授权</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/zfbEmpower.css">
    <link rel="stylesheet" href="../shop/css/Navigation.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="phoneError">
    </div>
    <div class="backBox" onclick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </div>
    <div class="topTitle ">
        支付授权</div>
    <div class="contentBox">
        <p class="title">
            支付宝授权：
        </p>
        <div class="zfbContent">
            <span>支付宝姓名：</span>
            <input type="text" placeholder="请输入姓名" id="TB_ZFB_USERNAME">
        </div>
        <div class="zfbContent">
            <span>支付宝账号：</span>
            <input type="text" placeholder="请输入账号" id="TB_ZFB_NUMBER">
        </div>
        <!-- 上传图片 -->
        <div class="productDrawingBox">
            <div class="productImg">
                <div id="zfbuploadBox">
                </div>
                <div class="uploadDIv">
                    <span>+</span><input type="file" name="file" multiple id="zfbinputs" accept="image/*"
                                         class='fileTest' multiple="multiple" />
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <p class="tip">
                提示：请上传支付宝收款码进行授权
            </p>
        </div>
        <p class="title">
            微信授权：
        </p>
        <div class="productDrawingBox">
            <div class="productImg">
                <div id="wxuploadBox">
                </div>
                <div class="uploadDIv">
                    <span>+</span><input type="file" name="file" multiple id="wxinputs" accept="image/*"
                                         class='fileTest' multiple="multiple" />
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <p class="tip">
                提示：请上传微信收款码进行授权
            </p>
        </div>

        <p class="title">
            银行卡授权：
        </p>
        <div class="zfbContent">
            <span>银行名称：</span>
            <input type="text" placeholder="请输入银行名称" id="bankName">
        </div>
        <div class="zfbContent">
            <span>银行卡号：</span>
            <input type="text" placeholder="请输入银行卡号" id="bankCard">
        </div>
    </div>
    <div class="bottomBox">
        <button id="btn_zf">提交</button>
    </div>
</body>
<script>
    //展示
    var zfbimg = [];
    var wximg = [];
    var zfbistj=false;
    var wxistj=false;
    $(function () {
        $.ajax({
            type: "post",
            url: "/order/getZFPerson",
            success: function (data) {
                if (data != "") {
                    $("#TB_ZFB_USERNAME").val(data.username)
                    $("#TB_ZFB_NUMBER").val(data.TB_ZFB_NUMBER)
                    $("#bankCard").val(data.TB_BACKCARD)
                    $("#bankName").val(data.TB_BACKNAME)
                    document.getElementById("zfbuploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='/images/" + data.TB_ZFB_FILEPATH + "' class='imgBiMG'></div>";
                    document.getElementById("wxuploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='/images/" + data.TB_WX_FILEPATH + "' class='imgBiMG'></div>";
                    $("#btn_zf").text("修改");
                    $(".title").append("<span style='color:red;'>(已授权)</span>");
                    zfbistj = true;
                    wxistj = true;
                }
            }
        });
    })
    // 上传图片
    $(function () {
        var AllowImgFileSize = '101376'; //1兆
        $("#zfbinputs").change(function () {
            zfbimg = [];
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
                var curr = $('#zfbinputs')[i].files[0].size;
                if (curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
                    layer.msg("图片文件大小超过限制 请上传小于99M的文件");
                } else {
                    zfbreads(fil[i]);
                    zfbimg.push($('#zfbinputs')[i].files[0]); //将传入的图片push到空对象中
                }
            }
        });
        function zfbreads(fil) {
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function () {
                document.getElementById("zfbuploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
                zfbistj = true;
            }
        }
        var AllowImgFileSize = '101376'; //1兆
        $("#wxinputs").change(function () {
            wximg = [];
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
                var curr = $('#wxinputs')[i].files[0].size;
                if (curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
                    layer.msg("图片文件大小超过限制 请上传小于99M的文件");
                } else {
                    wxreads(fil[i]);
                    wximg.push($('#wxinputs')[i].files[0]); //将传入的图片push到空对象中
                }
            }
        });
        function wxreads(fil) {
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function () {
                document.getElementById("wxuploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
                wxistj = true;
            }
        }
        $("#btn_zf").unbind("click").bind("click", function () {
            if (zfbistj == true && wxistj == true && $('#TB_ZFB_USERNAME').val() != "" && $('#TB_ZFB_NUMBER').val() != "" && $('#bankCard').val() != "" && $('#bankName').val() != "") {
                var formData = new FormData();
                formData.append('zfb', zfbimg[0]);
                formData.append('wx', wximg[0]);
                formData.append('TB_ZFB_USERNAME', $('#TB_ZFB_USERNAME').val());
                formData.append('TB_ZFB_NUMBER', $('#TB_ZFB_NUMBER').val());
                formData.append('TB_BACKCARD', $('#bankCard').val());
                formData.append('TB_BACKNAME', $('#bankName').val());
                var url = "/order/zfsq";
                $.ajax({
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    url: url,
                    success: function (data) {
                        if (data.success == false) {
                            if (data.msg == "_timeout") {
                                $('.phoneError').text("请重新登陆");
                                var top = ($(window).height() - $('.phoneError').height()) / 2;
                                var left = ($(window).width() - $('.phoneError').width()) / 2;
                                var scrollTop = $(document).scrollTop();
                                var scrollLeft = $(document).scrollLeft();
                                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                                setTimeout(function () {
                                    $('.phoneError').hide();
                                    $(".rushBuy").toggle()
                                    $(".cover").toggle()
                                    window.location.href = "../UserLogin/Login.html";
                                }, 1000)
                            }
                            else {
                                $('.phoneError').text(data.msg);
                                var top = ($(window).height() - $('.phoneError').height()) / 2;
                                var left = ($(window).width() - $('.phoneError').width()) / 2;
                                var scrollTop = $(document).scrollTop();
                                var scrollLeft = $(document).scrollLeft();
                                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                                setTimeout(function () {
                                    $('.phoneError').hide();
                                }, 1000)
                            }
                        }
                        else {
                            $('.phoneError').text(data.msg);
                            var top = ($(window).height() - $('.phoneError').height()) / 2;
                            var left = ($(window).width() - $('.phoneError').width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                            setTimeout(function () {
                                $('.phoneError').hide();
                                window.location.reload();
                            }, 1000)
                        }
                    }
                });
            }
            else {
                $('.phoneError').text("所有选项不许为空！");
                var top = ($(window).height() - $('.phoneError').height()) / 2;
                var left = ($(window).width() - $('.phoneError').width()) / 2;
                var scrollTop = $(document).scrollTop();
                var scrollLeft = $(document).scrollLeft();
                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                setTimeout(function () {
                    $('.phoneError').hide();
                }, 1000)
            }
        });
    })
</script>
</html>
